<template>
  <view class="custom-step flex jlr">
    <view class="item flex col a-center j-center" :class="{ on: step >= 1 }">
      <view class="circle"><span>1</span></view>
      <view class="line"></view>
      <view class="text">开始导入</view>
    </view>
    <view class="item flex col a-center j-center" :class="{ on: step >= 2 }">
      <view class="circle"><span>2</span></view>
      <view class="line"></view>
      <view class="text">编辑导入</view>
    </view>
    <view class="item flex col a-center j-center" :class="{ on: step >= 3 }">
      <view class="circle"><span>3</span></view>
      <view class="text">导入完成</view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    step: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {};
  },
};
</script>
<style scoped lang="scss">
.custom-step {
  width: 100%;
  height: 144rpx;
  padding: 22rpx 70rpx;
}
.item {
  width: 100rpx;
  text-align: center;
  position: relative;
}
.item .line {
  width: 170rpx;
  height: 1px;
  background-color: #979797;
  position: absolute;
  left: 95rpx;
  top: 24rpx;
}
.circle {
  width: 48rpx;
  flex-shrink: 0;
  height: 48rpx;
  line-height: 48rpx;
  box-sizing: content-box;
  border-radius: 50%;
  border: 1px solid #979797;
  text-align: center;
  color: #666;
  font-size: 26rpx;
}
.item.on .circle {
  background-color: #2979ff;
  border: 1px solid #2979ff;
}
.item.on .circle span {
  display: none;
}
.item.on .circle::before {
  content: "\2713";
  color: #fff;
  font-size: 24rpx;
}
.text {
  font-size: 26rpx;
  margin-top: 10rpx;
	white-space:nowrap;
}
</style>
